var name = window.localStorage.getItem('name')
if (name === 'null') {
    //没有用户登录
    document.querySelector('.loginHuan').innerHTML = '<a href="javascript:;" class="logina">登录/注册</a> <span>|</span>'

} else {
    //有用户登录
    document.querySelector('.loginHuan').innerHTML = '你好，<b style="color:red;">' + name + '</b>欢迎来到网易严选<span>|</span><ul class="info"><li><a class="infoCenter" href="javascript:;">个人中心</a></li><li><a class="changePwd" href="javascript:;">修改密码</a></li><li class="logout" onclick=logout()>注销登录</li></ul>';
    $('.loginHuan').css('position', 'relative')

    //获取内存中的数据,在首页里填入当前用户购物车里的商品数量
    var data = window.localStorage.getItem('data')
    if (data) { 
        //有数据
        data = JSON.parse(data)
        var arr = []
        data.forEach(item => {
            if (item.name === name) {
                arr.push(item)
            }
        })
        console.log(arr);
        $('.cartNum').text(arr.length)
    } else {
        $('.cartNum').text('0')
    }
}
$('.infoCenter').on('click', function () {
    location.href = '../info.html'
})
$('.changePwd').on('click', function () {
    location.href = '../changePwd.html'
})

/* 购物车跳转 */
$('.cart').on('click', function () {
    if (name === 'null') {
        layer.msg('请先登录', {
            icon: 2,
            time: 1000
        })
    } else {
        location.href = '../cart.html'
    }
})


//注销登录
function logout() {
    layer.confirm('您确定要退出登录吗?', {
        btn: ['确定', '再想想'],
        time: 1000
    }, function () {
        document.querySelector('.loginHuan').innerHTML = '<a href="../login.html" class="logina">登录/注册</a> <span>|</span>'
        $('.cartNum').text('0')
        window.localStorage.removeItem('name')
        window.localStorage.removeItem('userInfo')
    })
}
//登录
$('.logina').on('click', function () {
    location.href = '../login.html'
})
/* 封装获取搜索框的函数 */
function searchData() {
    var str1 = `<li>数据正在加载中</li>`
    $('.keywordUl').html(str1)
    promiseAjax({
        url: '/api/search',
        data: {
            __timestamp: +new Date(),
            page: 1,
            sortType: 0,
            categoryId: 0,
            descSorted: 'true',
            matchType: 0,
            floorPrice: -1,
            upperPrice: -1,
            stillSearch: 'false',
            searchWordSource: 1,
            size: 40,
            keyword: $('.keyword').val(),
            needPopWindow: 'true',
        }
    }).then(res => {
        res = JSON.parse(res)
        console.log(res);
        if (res.code == 200) {
            promiseAjax({
                url: '/api/keyword',
                data: {
                    __timestamp: +new Date(),
                    keywordPrefix: $('.keyword').val(),
                }
            }).then(res => {
                res = JSON.parse(res)
                if (res.code == 200) {
                    let data = res.data
                    if (!data) {
                        return false
                    }
                    console.log(data);
                    $('.keywordUl').empty()
                    var str = ''
                    data.forEach(item => {
                        str += `
                                    <li>${item}</li>
                                `
                    })
                    $('.keywordUl').html(str)
                    $('.keywordUl').stop().show()
                }
                //搜索框放内容
                $('.keywordUl>li').on('click', function () {
                    $('.keyword').val($(this).text())
                })
            })
        }
    })
}
$('.keyword').on('input', function () {
    if ($(this).val() === '') {
        return false
    }
    searchData()
    return false
})
//获取焦点请求数据
$('.keyword').on('focus', function () {
    if ($(this).val() === '') {
        return false
    }
    searchData()
})
//失去焦点隐藏结果
$('.keyword').on('blur', function () {
    setTimeout(function () {
      $('.keywordUl').hide()
    },200)
})


var searchUl = document.querySelector('.searchUl');

//发送ajax获取搜索框下热点词数据
promiseAjax({
    url: '/api/HotKeyWord',
    data: {
        __timestamp: 1634633095672
    }
}).then(res => {
    res = JSON.parse(res)
    //console.log(res);
    if (res.code == 200) {
        var data = res.data;
        var str = ''
        data.forEach((item, index) => {
            str += `<li>${item.keyword}`
            if (index === data.length - 1) {
                str += `</li>`
            } else {
                str += `<span>|</span></li>`
            }
        })
        $('.searchUl').html(str)
        $('.searchUl li').hover(function () {
            $(this).css('color', '#cc9756').siblings().css('color', '#a2a2a2')
        }, function () {
            $(this).css('color', '#a2a2a2').siblings().css('color', '#a2a2a2')
        })
    }
})

//发送ajax获取导航栏数据
promiseAjax({
    url: '/api/globalinfo',
    data: {
        __timestamp: 1634642785304
    }
}).then(res => {
    res = JSON.parse(res)
    //console.log(res);
    if (res.code == 200) {
        var cateList = res.data.cateList;
        var str = $('.indexNav').html()
        cateList.forEach(item => {
            str += `
                <li>${item.name}<span></span></li>
            `
        })
        $('.indexNav').html(str)

        for (var i = 0; i < cateList.length; i++) {
            var subCateGroupList = cateList[i].subCateGroupList
            //console.log(subCateGroupList);
            //给导航栏下的每个li创建一个div,添加category类名
            var div1 = document.createElement('div');
            //console.log($('.indexNav>li').eq(i + 1));
            $('.indexNav>li').eq(i + 1).append(div1)
            $($('.indexNav>li').eq(i + 1).find($('div'))).addClass("category")
            for (var j = 0; j < subCateGroupList.length; j++) {
                //给每个大分类下的小分类创建div，添加分类
                var div2 = document.createElement('div');
                div2.innerText = cateList[i].subCateGroupList[j].name
                $('.category').eq(i).append(div2)
                var ul = document.createElement('ul');
                $(div2).append(ul)
                //添加小分类
                var categoryList = cateList[i].subCateGroupList[j].categoryList
                //console.log(categoryList);
                for (var k = 0; k < categoryList.length; k++) {
                    var li = document.createElement('li')
                    li.innerText = categoryList[k].name
                    $(ul).append(li)
                }
            }
            //console.log(j);
            /* $(div1).width(($(div1).width+$(div2).width())-0) */
            /* $(div1).width(j*100) */
        }
        //设置悬浮在导航栏显示，并改变li样式
        $('.indexNav li').hover(function () {
            $(this).find($('.category')).css('display', 'flex')
            $(this).addClass('active').siblings().removeClass('active')
            $(this).find($('.indexNav li span')).addClass('active').siblings().removeClass('active')
            $('.carousel').css('opacity', '.1')
            $(this).find($('.category')).css('left', -($('.category').width()) / 2)
        }, function () {
            $(this).find($('.category')).css('display', 'none')
            $(this).removeClass('active').siblings().removeClass('active')
            $(this).find($('.indexNav li span')).removeClass('active').siblings().removeClass('active')
            $('.carousel').css('opacity', '1')
        })
    }
})

//轮播图
carousel()
function carousel() {
    $('.carousel .carouselUl li').each(() => {
        $('.carousel ol').append($('<li></li>'))
    })
    $('.carousel ol li').first().css('background-color', 'red')
    // 给ul前后复制新的li
    var $first = $('.carousel .carouselUl li').first().clone()
    $('.carousel .carouselUl').prepend($('.carousel .carouselUl li').last().clone())
    $('.carousel .carouselUl').append($first)
    // 设置ul样式
    $('.carousel .carouselUl').css({
        width: $first.width() * $('.carousel .carouselUl li').length + 'px',
        left: -$first.width() + 'px'
    })
    // 定义变量
    var index = 1;
    var flag = true
    //右击
    $('.carousel>a.rightBtn').click(function () {
        if (!flag) return false;
        flag = false;
        index++
        $('.carousel .carouselUl').animate({
            left: -index * $first.width()
        }, 1000, 'swing', function () {
            if (index === $('.carousel .carouselUl li').length - 1) {
                index = 1
                $('.carouselUl').css('left', -$first.width() + 'px')
            }
            $('.carousel ol li').eq(index - 1).css('backgroundColor', 'red').siblings().css('backgroundColor', '#000')
            flag = true
        })
        return false;
    })
    //左击
    $('.carousel>a.leftBtn').click(function () {
        if (!flag) return false;
        flag = false;
        index--
        $('.carousel .carouselUl').animate({
            left: -index * $first.width()
        }, 1000, 'swing', function () {
            if (index === 0) {
                index = $('.carousel .carouselUl li').length - 2
                $('.carouselUl').css('left', -index * $first.width() + 'px')
            }
            $('.carousel ol li').eq(index - 1).css('backgroundColor', 'red').siblings().css('backgroundColor', '#000')
            flag = true
        })
        return false;
    })
    //小圆点点击
    $('.carousel ol li').click(function () {
        if (!flag) return false;
        flag = false;
        index = $(this).index() + 1
        $('.carousel .carouselUl').animate({
            left: -index * $first.width()
        }, 1000, 'swing', function () {
            $('.carousel ol li').eq(index - 1).css('backgroundColor', 'red').siblings().css('backgroundColor', '#000')
            flag = true
        })
    })
    //自动轮播
    var timerId = setInterval(function () {
        $('.rightBtn').trigger('click')
    }, 2000)
    //移入移出
    $('.carousel').hover(function () {
        clearInterval(timerId)
    }, function () {
        timerId = setInterval(function () {
            $('.rightBtn').trigger('click')
        }, 2000)
    })
}

//新品首发
//发送ajax获取数据
promiseAjax({
    url: '/api/getNewItem',
    method: 'post',
    data: {
        page: 2,
        size: 8
    }
}).then(res => {
    res = JSON.parse(res)
    console.log(res);
    if (res.code == 200) {
        var result = res.data.result;
        console.log(result);
        for (var i = 0; i < result.length; i++) {
            //发送ajax获取新品首发商品
            var div = $('<div class="xinShow" detail-id="' + result[i].id + '"></div>')
            var img = $('<img src="" alt="">')
            img.attr('src', result[i].listPicUrl)
            var h4 = $('<h4 class="xinTitle"></h4>')
            h4.text(result[i].name)
            var p = $('<p></p>')
            var span1 = $('<span>￥</span>')
            var span2 = $('<span class="retailPrice"></span>')
            span2.text(result[i].retailPrice)
            var span3 = $('<span>￥</span>')
            var span4 = $('<span class="counterPrice"></span>')
            span4.text(result[i].counterPrice)
            div.append(img)
            div.append(h4)
            div.append(p)
            p.append(span1)
            p.append(span2)
            p.append(span3)
            p.append(span4)
            $('.xinConCen').append(div)
        }
        //左右按钮
        $('.xinRight').on('click', function () {
            $('.xinConCen').css('left', -$('.xinContent').width())
        })
        $('.xinLeft').on('click', function () {
            $('.xinConCen').css('left', 0)
        })
        //新品列表页
        $('.xinpina').on('click', function () {
            location.href = '../xinpin.html'
        })

        $('.xinShow').on('click', function () {
            //获取当前点击商品的id
            var goodsid = $(this).attr('detail-id')
            console.log(goodsid);
            location.href = '../detail.html?id='+goodsid

        })
    }
})

/* 回到顶部 */
window.onscroll = function () {
    /* console.log(document.documentElement.scrollTop); */
    //购物车固定定位
    if (document.documentElement.scrollTop > 90) {
        $('.cart').css({
            position: 'fixed',
            top: '-45px',
            right: '200px',
            zIndex: 999
        })

    }
    else {
        $('.cart').css({
            position: 'fixed',
            right: '200px',
            top: '45px'
        })
    }

    //回到顶部
    setTimeout(function () {
        $('.huiTop').on('click', function () {
            document.documentElement.scrollTop = 0;
        })
    }, 1000)
}